<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Gallery</title>
<link th:href="@{/css/bootstrap.css}" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Custom Theme files -->
<link th:href="@{/css/style.css}" rel='stylesheet' type='text/css' />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Hotel Deluxe Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfont-->
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" th:src="@{/js/jquery-1.11.1.min.js}"></script>
<script type="text/javascript" th:src="@{/js/login.js}"></script>
<script th:src="@{/js/jqueryeasydropdown.js}"></script>
<!------ Light Box ------>
<link rel="stylesheet" th:href="@{/css/swipebox.css}">
<link rel="stylesheet" th:href="@{/css/powerfloat.css}">
<script th:src="@{/js/jquery.swipebox.min.js}"></script>
    <script type="text/javascript">
		jQuery(function($) {
			$(".swipebox").swipebox();
		});
	</script>
<!------ Eng Light Box ------>
<script th:src="@{/js/wow.min.js}"></script>
<link th:href="@{/css/animate.css}" rel='stylesheet' type='text/css' />
<script>
	new WOW().init();
</script>
<body>
<div class="header">
		   <div class="col-sm-8 header-left">
					 <div class="logo">
						<a href="index.html"><img th:src="@{/images/logo.png}" alt=""/></a>
					 </div>
					 <div class="menu">
						  <a class="toggleMenu" href="#"><img th:src="@{/images/nav.png}" alt="" /></a>
						    <ul class="nav" id="nav">
								<li><a th:href="@{/toUserLogin}">首页</a></li>
								<!--<li><a th:href="@{/toRooms}">房间</a></li>-->
						    	<li><a href="news.html">新闻</a></li>
								<li><a href="/userOrder/userorder">我的订单</a></li>
								<li  class="active"><a th:href="@{/EditUser/allHotel}">旗下酒店</a></li>
								<li><a th:href="@{/EditUser/findUserId}">个人中心</a></li>
						    	<li><a href="404.html">社区</a></li>
								<div class="clearfix"></div>
							</ul>
							<script type="text/javascript" th:src="@{/js/responsive-nav.js}"></script>
				    </div>	
				     <!-- start search-->
				      <div class="search-box">
							<div id="sb-search" class="sb-search">
								<form>
									<input class="sb-search-input" placeholder="请输入你要查询的关键字" type="search" name="search" id="search">
									<input class="sb-search-submit" type="submit" value="" >

									<span class="sb-icon-search"> </span>
								</form>
							</div>
						</div>
	    		    <div class="clearfix"></div>
	    	    </div>
	            <div class="col-sm-4 header_right">
					<div id="loginContainer"><a href="#" id="loginButton"><img th:src="@{/images/login.png}">
						<span th:if="${session.user != null}" th:text="${session.user.userName}"></span>
						<span th:if="${session.user == null}" >登录</span>
					</a>
                        <a th:href="@{/userLogin/logout}"  style="float: right"><img th:src="@{/images/login.png}"><span>注销</span></a>
						<div id="loginBox">                
							<form id="loginForm" > 
									<fieldset id="body">
										<fieldset>
											  <label for="email">邮箱</label>
											  <input type="text" name="email" id="email">
										</fieldset>
										<fieldset>
												<label for="password">密码</label>
												<input type="password" name="password" id="password">
										 </fieldset>
										<input type="submit" id="login" value="登录">
										<label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住密码</i></label>
									</fieldset>
									 <span><a href="#">忘记密码?</a></span>
							  </form>
						  </div>
					 </div>
		                 <div class="clearfix"></div>
	                 </div>
	                <div class="clearfix"></div>
   </div>
    <div class="banner">
   	  <div class="container_wrap">
		<h1>目的地?</h1>
		<div class="dropdown-buttons">   
				<div class="dropdown-button">
					<select name="cityName" id="cityName" class="dropdown"  tabindex="9" data-settings='{"wrapperClass":"metro"}'
							style="
                   display: block;
                   font-size: 1.4em;
                   padding: 2px 60px 10px 5px;
                   overflow: hidden;
                   white-space: nowrap;
                   text-align: left;
                   font-weight: 300;
                   color: white;
                   border-radius: 1em 1em 1em;
                   background-color: #230d0d;
                   outline-color: transparent;
                   width: 100%">
					</select>
			  </div>
				     <div class="dropdown-button">
						 <select name="hotelName" id="hotelName" class="dropdown" tabindex="9" data-settings='{"wrapperClass":"metro"}'
								 style="
                    display: block;
                    font-size: 1.4em;
                    padding: 2px 30px 10px 5px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-align: left;
                    font-weight: 300;
                    color: white;
                    border-radius: 3em 3em 3em;
                    background-color:#230d0d;
                    outline-color: transparent;
                    width: 100%">

						 </select>
					 </div>
				   </div>
		  <form th:action="@{/hotelSearch/search}" th:method="POST">


			  <input type="text" value="输入酒店关键字"name="searchhotel"  onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '输入目的地关键字';}"
			  style="margin-right: 0.92em;
              width: 37%;">

				  <label class="btn1 btn-2 btn-2g"><input name="submit" type="submit"  value="搜索"></label>

		  </form>

		  <div class="clearfix"></div>
         </div>
    </div>
     <div class="content_top">
   	  <div class="container">
   		<div class="col-md-4 bottom_nav">
   		   <div class="content_menu">
			<ul>
				<li class="active"><a href="#">评价高</a></li>
                <li><a th:href="@{/hotelSearch/searchHotelByOrderCount}">预定最多</a></li>
				<li><a th:href="@{/hotelSearch/searchHotelByOrderTime}">最近预定</a></li>
				<li>
					<p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">价格区间</a></p>
					<div id="light" class="white_content"><center>按价格区间查询</center>
						<div style="width:100%;height: 7px; border:5px #fbf069;"></div>
						<center><div>
							<form th:action="@{/hotelSearch/Pricesearch}" method="post">
								<input type="number" placeholder="最小价格（MinPrice）" name="minPrice" />
								<div style="width:100%;height: 5px; border:5px #fbf069;"></div>
								<input type="number" placeholder="最大价格（MaxPrice）" name="maxPrice" />
								<div style="width:100%;height: 10px; border:5px #fbf069;"></div>
								<input type="submit" value="查询">
							</form>
						</div></center>
						<!--<div style="width:100%;height: 12px; border:5px #fbf069;"></div>-->
						<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"><center>关闭窗口</center></a>
					</div>
					<!--<div id="fade" class="black_overlay"></div>-->
				</li>
				<li><a th:href="@{/hotelSearch/mapsearch}">搜索定位</a></li>

			</ul>
			</div>
		</div>
		<div class="col-md-4 content_dropdown1">
			<span>特色酒店</span>
			<div class="dropdown-button"  >
				<select name="hotelType" id="hotelType" class="dropdown" tabindex="9" data-settings='{"wrapperClass":"metro"}'
						style="
                    display: block;
                    font-size: 1.4em;
                    padding: 2px 30px 10px 5px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-align: left;
                    font-weight: 300;
                    color: white;
                    border-radius: 3em 3em 3em;
                    background-color:#ffbc38;
                    outline-color: transparent;">

				</select>

			</div>
		</div>
		<div class="col-md-4 filter_grid">
			<ul class="filter">
				<li class="fil">类型 :</li>
				<li><a href=""> <i class="icon1"> </i> </a></li>
				<li><a href=""> <i class="icon2"> </i> </a></li>
				<li><a href=""> <i class="icon3"> </i> </a></li>
				<li><a href=""> <i class="icon4"> </i> </a></li>
				<li><a href=""> <i class="icon5"> </i> </a></li>
			</ul>
		</div>
   	</div>
   </div>
   <div class="living_middle" >
   	  <div class="container" >
   	    <div class="entertain_box wow fadeInLeft" data-wow-delay="0.4s">
		   <div class="col-md-3 grid_box"th:each="hotel:${hotel}"style="float: left;margin-bottom: 60px;" id="show" >
		   	   <a th:href="@{/images/p1.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{'/myfile/'+ ${hotel.fileName}}" style="width:285px;height:182px;  " class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		   	  <div class="grid_box2" >
				  <h4><a >酒店名称：<span th:text="${hotel.hotelName}"></span></a></h4>
				  <h4><a >酒店地址：<span th:text="${hotel.hotelAddress}"></span></a></h4>
				     <a th:href="@{/hotelSearch/searchRoom(id=${hotel.hotelId})}" class="btn3">查看房间>></a>
				     <a class="btn3 collect">收藏酒店
					  <span class="hotelid" th:id="${hotel.hotelId}"></span>
					 </a>

				  <a id="hotelId" hidden="hidden"><span th:text="${hotel.hotelId}"></span></a>
	          </div>
		   </div>
			<div id="showMore">
			<div class="col-md-3 grid_box" style="margin-bottom: 50px;" th:each="hotel:${hotel}">
				<a th:href="@{/images/p1.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{'/myfile/'+ ${hotel.fileName}}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a href="#"><span th:text="${hotel.hotelName}"></span></a></h4>
					<p><span th:text="${hotel.hotelAddress}"></span></p>
				</div>
			</div>
			<!--<div class="col-md-3 grid_box" style="margin-bottom: 50px;">
				<a th:href="@{/images/p1.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/p1.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a href="#">Hotel1</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>
			<div class="col-md-3 grid_box" style="margin-bottom: 50px;">
				<a th:href="@{/images/p1.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/p1.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a href="#">Hotel1</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>
			<div class="col-md-3 grid_box" style="margin-bottom: 50px;">
				<a th:href="@{/images/p1.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/p1.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a href="#">Hotel1</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>
			<div class="col-md-3 grid_box" style="margin-bottom: 50px;">
				<a th:href="@{/images/p1.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/p1.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a href="#">Hotel1</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>

		   <div class="col-md-3 grid_box" style="margin-bottom: 50px;">
		   	   <a th:href="@{/images/p2.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/p2.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
		   	  <div class="grid_box2">
			   <h4><a href="#">Hotel2</a></h4>
			   <p>voluptatem sequi</p>
	          </div>
		   </div>
			<div class="col-md-3 grid_box"style="margin-bottom: 50px;">
				<a th:href="@{/images/p2.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/p2.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a href="#">Hotel2</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>
			<div class="col-md-3 grid_box" style="margin-bottom: 50px;">
				<a th:href="@{/images/p2.jpg}" class="swipebox"  title="Image Title"> <img th:src="@{/images/p2.jpg}" class="img-responsive" alt=""><span class="zoom-icon"></span> </a>
				<div class="grid_box2">
					<h4><a href="#">Hotel2</a></h4>
					<p>voluptatem sequi</p>
				</div>
			</div>-->

</div>

	          </div>
   </div>


		 </div>	
     </div>
   </div>
   <div class="living_bottom">
   	  <div class="container">
   	  	<h2 class="title block-title">Latest Posts</h2>
   	  	<div class="col-md-6 post_left wow fadeInLeft" data-wow-delay="0.4s">
   	  		<div class="mask1"><img th:src="@{/images/pic4.jpg}" alt="image" class="img-responsive zoom-img" /></div>
   	  	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus, sem eget sagittis sagittis, nisl magna sodales eros, ut feugiat velit velit non turpis. Cras eu nibh dapibus justo fringilla   <a href="single.html">More</a></p>
   	  	    <div class="divider"></div>
   	  	    <p class="field-content">30 Sep 2015</span></p>
   	  	</div>
   	  	<div class="col-md-6 post_left wow fadeInRight" data-wow-delay="0.4s">
   	  		<div class="mask1"><img th:src="@{/images/pic5.jpg}" alt="image" class="img-responsive zoom-img" /></div>
   	  	    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus, sem eget sagittis sagittis, nisl magna sodales eros, ut feugiat velit velit non turpis. Cras eu nibh dapibus justo fringilla   <a href="single.html">More</a></p>
   	  	    <div class="divider"></div>
   	  	    <p class="field-content">30 Sep 2015</span></p>
   	  	</div>
   	  </div>
   </div>
   <div class="footer">
   	<div class="container">
   	 <div class="footer_top">
   	   <h3>Subscribe to our newsletter</h3>
   	   <form>
		<span>
			<i><img th:src="@{/images/mail.png}" alt=""></i>
		    <input type="text" value="Enter your email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Enter your email';}">
		    <label class="btn1 btn2 btn-2 btn-2g"> <input name="submit" type="submit" id="submit" value="Subscribe"> </label>
		    <div class="clearfix"> </div>
		</span>			 	    
	   </form>
	  </div>
	  <div class="footer_grids">
	     <div class="footer-grid">
			<h4>Ipsum Quis</h4>
			<ul class="list1">
				<li><a href="contact.html">Contact</a></li>
				<li><a href="#">Mirum est</a></li>
				<li><a href="#">Placerat facer</a></li>
				<li><a href="#">Claritatem</a></li>
				<li><a href="#">Sollemnes </a></li>
			</ul>
		  </div>
		  <div class="footer-grid">
			<h4>Quis Ipsum</h4>
			<ul class="list1">
				<li><a href="#">Placerat facer</a></li>
				<li><a href="#">Claritatem</a></li>
				<li><a href="#">Sollemnes </a></li>
				<li><a href="#">Claritas</a></li>
				<li><a href="#">Mirum est</a></li>
			</ul>
		  </div>
		  <div class="footer-grid last_grid">
			<h4>Follow Us</h4>
			<ul class="footer_social wow fadeInLeft" data-wow-delay="0.4s">
			  <li><a href=""> <i class="fb"> </i> </a></li>
			  <li><a href=""><i class="tw"> </i> </a></li>
			  <li><a href=""><i class="google"> </i> </a></li>
			  <li><a href=""><i class="u_tube"> </i> </a></li>
		 	</ul>
		 	<div class="copy wow fadeInRight" data-wow-delay="0.4s">
              <p>Copyright &copy; 2016.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
	        </div>
		  </div>
		  <div class="clearfix"> </div>
	   </div>
      </div>
   </div>
</body>
<script>

    //点击城市信息下拉框查询
    $('#cityName').on('change',function () {
        var cityName = $(this).val();
        window.location.href='/cityHotel/hotelView?cityName='+cityName;
    })

    //点击酒店信息下拉框查询
    $('#hotelName').on('change',function () {
        var hotelName = $(this).val();
        window.location.href='/cityHotel/roomView?hotelName='+hotelName;
    })


    $(document).ready(function () {
	  	$('#hotelType').on('change',function () {
	  	    var hotelType = $(this).val();
			window.location.href='/hotelSearch/hotelShow?hotelType='+hotelType;
        })

		$('.collect').click(function () {
            var id = $(this).find(".hotelid").attr("id");

            $.get('/EditUser/collectHotel?id='+id,function (text) {
                if('ok'==text){
                    alert("收藏成功,可在个人中心进行查看");
                }else if('error' == text){
                    alert("已收藏");
				}
            })
        })
    })
    window.onload = function(){
        $.ajax({
            async:false,
            type:"POST",
            url:"/cityHotel/cityhotel",
            dataType:"json",
            data:{
                // warehouse: $("#cityName").val(),
            },
            success:function (data) {
                console.log(data);
                $("#cityName").append("<option>"+'选择城市'+"</option>option>");
                for (var i = 0; i<data.length;i++){
                    $("#cityName").append("<option  value=" + data[i].cityId + ">" + data[i].cityName + "</option>");

                }
            }
        })


        $.ajax({
            async:'true',
            type:"POST",
            url:"/cityHotel/hotel",
            dataType:"json",
            data:{
                // warehouse: $("#hotelName").val(),
            },
            success:function (data) {
                console.log(data);
                $("#hotelName").append("<option>"+'选择酒店'+"</option>option>");
                for (var i = 0; i<data.length;i++){
                    $("#hotelName").append("<option >" + data[i].hotelName + "</option>");

                }
            }
        })

        $.ajax({
            async:'true',
            type:"POST",
            url:"/hotelSearch/hotelType",
            dataType:"json",
            data:{
                // warehouse: $("#hotelName").val(),
            },
            success:function (data) {
                console.log(data);
                $("#hotelType").append("<option>"+' 选择类型'+"</option>option>");
                for (var i = 0; i<data.length;i++){
                    $("#hotelType").append("<option >" + data[i].hotelType + "</option>");


                }
            }
        })

		if($('#hotelId').val()!=null){
		    $('#showMore').hide();


		}
    }
</script>
</html>		